"use client";

import { SettingOutlined } from "@ant-design/icons";
import { ColorModeContext } from "@contexts/color-mode";
import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd";
import { useGetIdentity, useNavigation } from "@refinedev/core";
import {
  Layout as AntdLayout,
  Avatar,
  Dropdown,
  MenuProps,
  Space,
  Switch,
  theme,
  Typography,
} from "antd";
import React, { useContext, useEffect, useState } from "react";

const { Text } = Typography;
const { useToken } = theme;

export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
  sticky = true,
}) => {
  const navigate = useNavigation();
  const { token } = useToken();
  const [user, setUser] = useState<any | null>(null);
  // const { data: user } = useGetIdentity<IUser>();
  
  const { mode, setMode } = useContext(ColorModeContext);

  const headerStyles: React.CSSProperties = {
    backgroundColor: token.colorBgElevated,
    display: "flex",
    justifyContent: "flex-end",
    alignItems: "center",
    padding: "0px 24px",
    height: "64px",
  };

  if (sticky) {
    headerStyles.position = "sticky";
    headerStyles.top = 0;
    headerStyles.zIndex = 1;
  }
  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("user") || "{}");
    setUser(user);
    console.log(user);
  }, []);
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: 'My Account',
      disabled: true,
    },
    {
      type: 'divider',
    },
    {
      key: '2',
      label: 'Profile',
      extra: '>',
      onClick: () => {
        navigate.push('/user/profile');
      },
    },
    {
      key: '3',
      label: 'Billing',
      extra: '>',
    },
    {
      key: '4',
      label: 'Settings',
      icon: <SettingOutlined />,
      extra: '>',
    },
  ];
  return (
    <AntdLayout.Header style={headerStyles}>
      <Space>
        <Switch
          checkedChildren="🌛"
          unCheckedChildren="🔆"
          onChange={() => setMode(mode === "light" ? "dark" : "light")}
          defaultChecked={mode === "dark"}
        />
        <Dropdown menu={{ items }} placement="topRight" >
          <a onClick={(e) => e.preventDefault()}>
            <Space style={{ marginLeft: "8px" }} size="middle">
              <Text strong>{user?.user_name}</Text>
              <Avatar src={user?.avatar || '/assets/logo.png'} alt={user?.user_name} />
            </Space>
          </a>
        </Dropdown>
      </Space>
    </AntdLayout.Header>
  );
};
